<template>
	<view class="bg-white ">
		<view class="p-10 ">
			<view class="mb-6 flex  flex-y-center" v-if='WEBCONFIG?.web_logo'>
				<image class="w-50 h-50 rounded-circle" :src="WEBCONFIG?.web_logo">
				</image>
				<view class="fs-15 ml-5">{{WEBCONFIG?.web_name}}</view>
			</view>
			<view class="fs-15 fw-600 mb-4"> 设置您的昵称头像</view>
			<view class="fs-12 text-grey-4 mb-3">用于展示您的用户信息</view>
		</view>
		<view class="p-10">
			<view class="flex  flex-y-center flex-x-space-between p-10 py-15 text-grey-2 under-line">
				<view class="fs-13"> 头像</view>
				<button class="btn-normal  flex  flex-y-center" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="flex  flex-y-center">
						<image class="w-40 h-40 rounded-circle" :src='form.avatar' v-if="form.avatar"></image>
						<view class=" fs-13  mr-2 text-grey-1" v-else>点击设置头像</view>
						<uv-icon name="arrow-right" size="18" color="#838383"></uv-icon>
					</view>
				</button>
			</view>
			<view class="flex  flex-y-center flex-x-space-between p-10 py-15 under-line">
				<view class="fs-13"> 昵称</view>
				<view class="flex  flex-y-center">
					<input class="fs-13 mr-2 text-right text-grey-2" v-model="form.nickname" type="nickname"
						@change='change' placeholder="点击设置昵称" />
					<uv-icon name="arrow-right" size="18" color="#838383"></uv-icon>
				</view>
			</view>
			<view class="line mt-3 mb-3"></view>
		</view>

		<view class="p-10">
			<view class="btn-blue py-12 rounded-20 text-white text-center" @click="submit()">提交</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { useWebConfigStore, useRefs, useUserStore } from "@/stores/index";
	import { $http } from "@/utils";
	import { $tool } from "../../utils";
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const { USERINFO } = useRefs(useUserStore());
	const avatarStatus = ref(false)
	const emit = defineEmits(['close'])
	const form = ref({
		avatar: '',
		nickname: '',
	})

	const onChooseAvatar = (e) => {
		avatarStatus.value = true
		form.value.avatar = e.detail.avatarUrl
	}

	const change = (e) => {
		form.value.nickname = e.detail.value
	}
	const submit = () => {
		if (!form.value.nickname || !form.value.avatar) {
			$tool.toast('请完善资料')
			return;
		}
		if (avatarStatus.value) {
			$http.upload('upload/Upload', { filePath: form.value.avatar, name: 'file', is_hide: 1 }).then(res => {
				form.value.avatar = res.data.url
				update()
			})
		} else {
			update()
		}
	}

	const update = () => {
		const { setUserInfo } = useUserStore();
		$http.post('User/updateUser', form.value).then(res => {
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
			USERINFO.value.nickname = form.value.nickname
			USERINFO.value.avatar = form.value.avatar
			setUserInfo(USERINFO.value)
			emit('close')
		})
	}
</script>

<style scoped>
	.under-line {
		border-bottom: 1rpx solid #eeeeee;
	}

	.btn-blue {
		background: linear-gradient(to right, #406eff, #56ccf2);
	}

	.text-grey-1 {
		color: #858597;
	}
</style>